<template>
  <ul class="proList" :class="'col_' + type">
<!--    <li class="proItem" v-for="item of list" :key="item.proid">-->
<!--      <div class="itemImage">-->
<!--        <img :src="item.img1" alt="">-->
<!--      </div>-->
<!--      <div class="itemInfo">-->
<!--        <div class="itemTitle">{{ item.proname }}</div>-->
<!--        <div class="itemPrice">¥ {{ item.originprice }}</div>-->
<!--        <div class="itemDesc van-multi-ellipsis&#45;&#45;l2">{{ item.desc }}</div>-->
<!--      </div>-->
<!--    </li>-->
    <li class="proItem"
        @click="toDetail(item.proid)"
        v-for="item of list" :key = "item.proid">
      <div class="itemImage">
        <van-image :src="item.img1" ></van-image>
      </div>
      <div class="itemInfo">
        <h5 class="van-multi-ellipsis--l2">{{ item.proname }}</h5>
        <p>{{ item.originprice }}</p>
      </div>
    </li>
    <div class="changeIcon" @click="changeIcon">
      <van-icon v-if="type === 1" name="apps-o" size="36" />
      <van-icon v-else name="bars" size="36" />
    </div>
  </ul>
</template>

<script>
import Vue from 'vue'
import { Icon, Image as VanImage } from 'vant'
Vue.use(Icon)
Vue.use(VanImage)
export default {
  props: {
    list: Array
  },
  name: 'ProList',
  data () {
    return {
      type: 2
    }
  },
  methods: {
    changeIcon () {
      this.type = this.type === 1 ? 2 : 1
    },
    toDetail (proid) {
      // this.$router.push('/detail/' + proid)
      // this.$router.push({ path: '/detail/ + proid' })
      this.$router.push({ name: 'detail', params: { proid } })
    }
  }
}
</script>

<style lang="stylus" scoped>
.proList.col_2
  display flex
  flex-wrap wrap
  .proItem
    width 46%
    height 2.6rem
    margin 5px 2%
    background-color #fff
    .itemImage
      width 100%
      height 1.8rem
      overflow hidden
      background-color #f66
    .itemInfo
      h5
        height 34px

.proList.col_1
  .proItem
    height 1.2rem
    background-color #fff
    margin 5px 0
    display flex
    .itemImage
      width 1.2rem
      background-color #f66
    .itemInfo
      flex 1
.changeIcon
  position fixed
  bottom 60px
  right 10px
  width 36px
  height 36px
  border 1px solid #efefef
  background-color #efefef
  border-radius 50%
</style>
